<template>
    <n-modal
        :mask-closable="false"
        :close-on-esc="false"
        :title="title"
        v-model:show="show"
        preset="card"
        @close="close"
        :on-after-enter="init"
        :on-after-leave="destroy"
        style="width: 1000px;"
    >
        <n-form
            label-width="auto"
            label-placement="left"
        >
            <n-form-item :label="$t('common-base-name')">
                <n-input v-model:value="form.name"/>
            </n-form-item>
            <n-form-item :label="$t('base-user-phone')">
                <n-input v-model:value="form.phone"/>
            </n-form-item>
            <n-form-item :label="$t('base-user-email')">
                <n-input v-model:value="form.email"/>
            </n-form-item>
            <n-form-item :label="$t('common-base-status')" show-require-mark>
                <n-radio-group v-model:value="form.status">
                    <n-radio label="正常" value="1"/>
                    <n-radio label="停用" value="0"/>
                </n-radio-group>
            </n-form-item>
            <n-form-item :label="$t('common-base-remark')">
                <n-input type="textarea" v-model:value="form.remark"/>
            </n-form-item>
            <n-form-item label="图片">
                <n-upload
                    list-type="image-card"
                    show-download-button
                    :file-list="group"
                    :on-before-upload="handleSaveAttach"
                    :on-remove="handleRemoveAttach"
                    :on-download="handDownloadAttach"
                >
                    点击上传
                </n-upload>
            </n-form-item>
        </n-form>
        <template #footer>
            <n-space justify="end">
                <n-button type="info" @click="handleConfirmOnClick">{{ $t("common-button-submit") }}</n-button>
                <n-button @click="close">{{ $t("common-button-close") }}</n-button>
            </n-space>
        </template>
    </n-modal>
</template>
<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
import { getDemo, postOrPutDemo } from '@/api/development/demo'
import { IMessage } from '@/utils/message'
import { UploadFileInfo } from 'naive-ui'
import { getAttachListByGroupId, postAttach, deleteAttach, downloadAttach } from '@/api/file/attach'

const state = reactive({
    form: {

    } as Demo,
    group: [

    ] as UploadFileInfo[]
})

const {
    form,
    group
} = toRefs(state)

const props = defineProps({
    title: {
        type: String
    },
    show: {
        type: Boolean
    },
    id: {
        type: String || '',
        required: true
    }

})

const emits = defineEmits<{
    (e: 'handleCloseOnClick'): void,
    (e: 'handleSelectOnClick'): void
}>()

const init = async () => {
    if(props.id !== ''){
        const { data } = await getDemo(props.id)
        const { data: attachList }= await getAttachListByGroupId(data.groupId)
        state.form = data
        state.group = attachList.map(ele => ({
            id: ele.id,
            name: ele.name,
            status: 'finished',
            fullPath: `${ele.groupId}/${ele.name}`,
            url: `http://127.0.0.1:9000/static/${ele.groupId}/${ele.name}`
        }))
        return
    }
}

const handleConfirmOnClick = async () => {
    const { message } = await postOrPutDemo(state.form)
    IMessage({ content: message })
    emits('handleCloseOnClick')
    emits('handleSelectOnClick')
}

async function handleSaveAttach(options: { file: UploadFileInfo, fileList: UploadFileInfo[]}){
    const formData = new FormData()
    formData.append('file', options.file.file as Blob)
    if(state.form.groupId){
        formData.append('groupId', state.form.groupId)
    }
    const { data } = await postAttach(formData)
    state.form.groupId = data.groupId
    state.group.push({
        id: data.id,
        name: data.name,
        status: 'finished',
        fullPath: `${data.groupId}/${data.name}`,
        url: `http://127.0.0.1:9000/static/${data.groupId}/${data.name}`
    })
}

async function handleRemoveAttach(options: { file: UploadFileInfo, fileList: UploadFileInfo[]}){
    const { data } = await deleteAttach(options.file.id)
    const index = state.group.findIndex(ele => ele.id === data.id)
    state.group.splice(index, 1)
}

async function handDownloadAttach(file: UploadFileInfo){
    window.open(`http://127.0.0.1:9000/file/attach/download/${file.id}`)
}

const close = () => {
    emits('handleCloseOnClick')
}

function destroy(){
    state.group = []
    state.form = {} as Demo
}

</script>
